<!--
作者：qzy
时间：20221029
说明：此组件为添加教学任务学生的搜索组件，以element-plus动态补全框来动态搜索学生
设计思路：
  此搜索组件需要多个动态补全框共同进行搜索，补全框之间还有关联关系，所以在做的时候，用form表单里对应值来绑定补全框的文字，以及通过点击事件
获取当前操作的补全框，然后改根据当前补全框去操作以及获取数据，在点击查询之后，将查询表单的数据传给父组件调用，该组件方法较为复杂臃肿
-->
<template>
  <div class="container">
    <ul class="search">
      <li>
        <el-autocomplete
          v-model="from.department"
          :fetch-suggestions="querySearchDepartment"
          placeholder="请选择院系"
          clearable
          @select="handleSelect"
          @change="departmentHandleChange"
          @click="getSign('department')"
        />
      </li>
      <li>
        <el-autocomplete
          v-model="from.major"
          :fetch-suggestions="querySearchDepartment"
          placeholder="请选择专业"
          clearable
          @select="handleSelect"
          @change="majorHandleChange"
          @click="getSign('major')"
        />
      </li>
      <li>
        <el-autocomplete
          v-model="from.grade"
          :fetch-suggestions="querySearchDepartment"
          placeholder="请选择年级"
          clearable
          @select="handleSelect"
          @change="gradeHandleChange"
          @click="getSign('grade')"
        />
      </li>
      <li>
        <el-autocomplete
          v-model="from.adminClass"
          :fetch-suggestions="querySearchDepartment"
          placeholder="请选择行政班级"
          clearable
          @select="handleSelect"
          @change="adminClassHandleChange"
          @click="getSign('adminClass')"
        />
      </li>
      <li>
        <el-input
          placeholder="请输入关键词"
          v-model="keyWord"
        >请输入关键词</el-input>
      </li>
      <li>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="local">查询</el-button>
      </li>
    </ul>
  </div>
</template>

<script lang='ts' setup>
import {
  getCurrentInstance, defineProps, ref, withDefaults,
} from 'vue';
import Request from '@/api/request/request';

interface RestaurantItem {
  id: number
  value: string
}
type Props = {
  pageSize?:number,
  page?:number,
}
const { proxy } = getCurrentInstance();
const props = withDefaults(defineProps<Props>(), {
  pageSize: 10,
  page: 1,
});

const from = ref({ // 动态补全框绑定值
  department: '',
  major: '',
  grade: '',
  adminClass: '',
});
// 院系
const department = ref<number | string>('');
// 专业
const major = ref<number | string>('');
// 年级
const grade = ref<number | string>('');
// 班级
const adminClass = ref<number | string>('');
// 输入的关键词
const keyWord = ref<number | string>('');
// 传入当前操作的窗口，设为标识，根据标识进行相对应的操作
const sign = ref();
// 从窗口获取到的数据
const resData = ref();
// 可以自定义处理方法，也可以使用element-plus定义的方法
const filter = (arr:[]) => {
  let obj:{id:number, value:string};
  let list: any[] = [];
  arr.forEach((item:any) => {
    obj = {
      id: item.id,
      value: item.name,
    };
    list.push(obj);
  });
  return list;
};

// 清空表单数据
const removeForm = () => {
  from.value.major = '';
  from.value.grade = '';
  from.value.adminClass = '';
  department.value = '';
  major.value = '';
  grade.value = '';
  adminClass.value = '';
  keyWord.value = '';
};

// queryString 为在框中输入的值
// callback 回调函数,将处理好的数据推回
// 根据用户输入的字符串去后端查询对应的数据，然后通过自定义的数据处理方法，将数据处理成表单需要的数据，然后cb返回表单，表单才能相对应展示数据
const querySearchDepartment = async (queryString: string, cb: any) => {
  if (sign.value === 'department') { // 部门
    resData.value = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLDEPARTMENT_MANAGE}`, null, {
      params: {
        name: queryString,
        pageSize: props.pageSize,
        page: props.page,
      },
    }).get();
  } else if (sign.value === 'major') { // 专业
    resData.value = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLMAJOR_MANAGE}`, null, {
      params: {
        name: queryString,
        departmentId: department.value,
        pageSize: props.pageSize,
        page: props.page,
      },
    }).get();
  } else if (sign.value === 'grade') { // 年级
    resData.value = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLGRADE_MANAGE}`, null, {
      params: {
        name: queryString,
        pageSize: props.pageSize,
        page: props.page,
      },
    }).get();
  } else if (sign.value === 'adminClass') { // 班级
    resData.value = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCLASS_MANAGE}`, null, {
      params: {
        name: queryString,
        departmentId: department.value,
        gradeId: grade.value,
        majorIds: major.value,
        pageSize: props.pageSize,
        page: props.page,
      },
    }).get();
  } else { // 默认班级
    resData.value = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLCLASS_MANAGE}`, null, {
      params: {
        name: queryString,
        departmentId: department.value,
        majorIds: major.value,
        pageSize: props.pageSize,
        page: props.page,
      },
    }).get();
  }
  let results = filter(resData.value.data.data);
  cb(results);
};

// 在点击选中建议，也就是点击从后端获取到的数据后，完成相对应的事件，例如查询某条数据
const handleSelect = (item: RestaurantItem) => {
  if (sign.value === 'department') {
    removeForm(); // 选择到院系的搜索之后，重置其他搜索里的数据，重新渲染表单数据
    department.value = item.id;
  } else if (sign.value === 'major') {
    major.value = item.id;
  } else if (sign.value === 'grade') {
    grade.value = item.id;
  } else if (sign.value === 'adminClass') {
    adminClass.value = item.id;
  }
};

// 获取操作标识
const getSign = (value:string) => {
  console.log(value);
  sign.value = value;
};

// 院系搜索框里的值发生改变时触发，主要用于清空该输入框数据
const departmentHandleChange = (value: string | number) => {
  removeForm();
};
// 专业搜索框里的值发生改变时触发，主要用于清空该输入框数据
const majorHandleChange = (value: string | number) => {
  if (value === '') {
    from.value.major = '';
    major.value = '';
  }
};
// 年级搜索框里的值发生改变时触发，主要用于清空该输入框数据
const gradeHandleChange = (value: string | number) => {
  if (value === '') {
    from.value.grade = '';
    grade.value = '';
  }
};
// 行政班级搜索框里的值发生改变时触发，主要用于清空该输入框数据
const adminClassHandleChange = (value: string | number) => {
  if (value === '') {
    from.value.adminClass = '';
    adminClass.value = '';
  }
};

// 重置搜索框
const reset = async () => {
  from.value.department = '';
  removeForm();
  const searchData = {
    pageSize: 10,
    page: 1,
  };
  proxy.$emit('getStudents', searchData);
};

// 搜索
const local = async () => {
  const data = {
    departmentId: department.value,
    majorIds: major.value,
    gradeId: grade.value,
    classIds: adminClass.value,
    name: keyWord.value,
    pageSize: props.pageSize,
    page: props.page,
  };
  proxy.$emit('getStudents', data);
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      list-style: none;
      &:last-child{
        .el-button {
          width: 60px;
        }
      }
    }
  }
}
@media (max-width: 1660px) {
  .search {
    li {
      width: calc(100% - 10%);
      .el-input {
        width: calc(100% - 10%);
      }
    }
  }
}
</style>
